<template>
<div>
	<div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-logo-menu"></i>产品</el-breadcrumb-item>
            <el-breadcrumb-item>产品规格</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
	<div style="margin: 10px 0;">商品名：<span style="font-weight: 700;">{{ productName }}</span>
	</div>
	<hr/>
<!-- 	<template>
		<el-table :data="tableData3" height="250" border style="width: 100%">
			<el-table-column prop="date" :label="propertyName1" :width="propertyWidth1"></el-table-column>
    		<el-table-column prop="name" :label="propertyName2" :width="propertyWidth2"></el-table-column>
    		<el-table-column prop="name" :label="propertyName3" :width="propertyWidth3"></el-table-column>
    		<el-table-column prop="address" label="地址"></el-table-column>
  		</el-table>
	</template> -->

	<div style="clear:both;"></div>
        <div slot="footer" class="dialog-footer" style="float:right;">
            <el-button type="primary" @click="saveList()">保存</el-button>
        </div>
    <div style="clear:both;"></div>

	<div class="el-table el-table--fit el-table--border el-table--enable-row-hover el-table--enable-row-transition">
		<table class="el-table__header">
			<thead id="subProductHead">

			</thead>
			<tbody id="subProductBody">
				<!-- <tr>
					<td>t1 r1</td>
					<td>t2 r1</td>
					<td>t3 r1</td>
					<td><input type="input" data-pro1="id1" data-pro2="id2" data-pro3="" name="ku_cun" value="5"></td>
					<td><input type="input" data-pro1="id2" data-pro2="id2" data-pro3="" name="jia_ge" value="100.5"></td>
				</tr>
				<tr>
					<td>t1 r2</td>
					<td>t2 r2</td>
					<td>t3 r2</td>
					<td><input type="input" data-pro1="id1_r2" data-pro2="id2_r2" data-pro3="" name="ku_cun" value="5"></td>
					<td><input type="input" data-pro1="id2_r2" data-pro2="id2_r2" data-pro3="" name="jia_ge" value="100.5"></td>
				</tr> -->
			</tbody>
		</table>
	</div>
</div>
</template>

<script>
	import $ from 'jquery';

	export default{
		data(){
			return {
				row: '',
				productId:'',
				productName: '',
				subProductCache:{},	//子产品缓存  key : SubProduct.propertyLabelIds , value : SubProduct
				propertyNum: 0,		//未禁用的属性个数
			}
		},
		created(){
			let self = this;
			this.row = this.$route.params.product
			if(this.row&&this.row.id){
				this.product = this.$route.params.product
				this.productId = this.product.id
				this.productName = this.product.name
			}else{
				self.productId = localStorage.getItem("productId");
				if(!self.productId){
					self.$notify({title: '提示',message:"请从商品列表进入",type: 'error'});
		  			window.location.hash = "product";
				}
			}	
		},
		mounted(){
			this.init()
		},
		methods: {
			reflashSubProductCache(productId,propertyNum){	//刷新子产品缓存
				let self = this;
				if (productId && propertyNum) {
					self.subProductCache = {};	//先清空
					self.myajax("/subProduct/" + productId + "/" + propertyNumber ,{} ,function(data){
						if (data && data.code == 1000) {
							var subProductList = data.data;
							for(var i in subProductList){
								self.subProductCache[ subProductList[i].propertyLabelIds ] = subProductList[i];
							}
							self.$notify({title: '提示',message:"缓存刷新成功",type: 'success'});
						}else{
							self.$notify({title: '提示',message:(data.message==null?"缓存刷新失败":data.message),type: 'error'});
						}
					});
				}else{
					self.$notify({title: '提示',message:"缓存刷新失败",type: 'error'});
				}
			},
			saveList(){
				let self = this;
				var items = $(":input[name='ku_cun']");
				var item;
				//子产品列表
				var subProductList = [];
				
				for ( item  = 0 ; item < items.length ; item ++ ){
					//单个子产品
					var subProduct = {};
					//属性标签ID数组
					var propertyLabelIds = [];

					var data_pro1 = items[item].getAttribute("data-pro1");
					// console.log(data_pro1);
					if(data_pro1){
						propertyLabelIds.push(data_pro1);
					}

					var data_pro2 = items[item].getAttribute("data-pro2");
					// console.log(data_pro2);
					if(data_pro2){
						propertyLabelIds.push(data_pro2);
					}

					var data_pro3 = items[item].getAttribute("data-pro3");
					// console.log(data_pro3);
					if(data_pro3){
						propertyLabelIds.push(data_pro3);
					}

					var date_id = items[item].getAttribute("data-id");

					console.log(propertyLabelIds);

					var ku_cun = items[item].value;
					console.log(ku_cun);
					var jia_ge = $(items[item]).parent().parent().find(":input[name='jia_ge']")[0].value;
					console.log(jia_ge);

					subProduct.id = (date_id == null ? "" : date_id);
					subProduct.productId = self.productId;
					subProduct.price = jia_ge;
					subProduct.stock = ku_cun;
					subProduct.propertyLabelIds = self.getStringByArray(propertyLabelIds);
					subProductList.push(subProduct);
				}
				console.log("subProductList");
				console.log(subProductList);

				self.myajax("/subProduct/saveList",{subProductList:subProductList},function(data){
					if (data && data.code == 1000) {
							self.$notify({title: '提示',message:"保存成功",type: 'success'});
							self.$router.go(-1)
						}else{
							self.$notify({title: '提示',message:(data.massage == null?'保存失败':data.massage),type: 'error'});
						}
				})
			},
			getStringByArray(arr){		//id拼接方法
				var result = "";
				if (arr && arr.length > 0) {
					arr.sort();
					for(var i in arr ){
						var obj = arr[i];
						if (obj) {
							result += obj.toString();
						}
					}
				}
				return result ;
			},
			init(){
				var self = this;
				var propertyNum;
				var propertyLabelList = [[],[],[]];
				self.myajax("/property/enableList/" + self.productId, {}, function(data){
					console.log(data)
		           	var list = data.data;
					propertyNum = self.propertyNum = list.length;

					var item;
					//构建表头
					var headHtml = '<tr>';
					for( item  = 0 ; item < propertyNum ; item ++ ){
						headHtml += '<td width="200" class="el-table_1_column_2 is-leaf"><div class="cell">'+list[item].name +'</div></td>'
						self.myajax("/propertyLabel/showList/" + list[item].id, {}, function(data){
							console.log(data)
				           	propertyLabelList[item] = data.data;
					    });

					}
					headHtml += '<td width="200" class="el-table_1_column_2 is-leaf"><div class="cell">库存</div></td><td width="200" class="el-table_1_column_2 is-leaf"><div class="cell">价格</div></td></tr>';
					$("#subProductHead").empty().append(headHtml);
			    });


				var subProductCache = {};
				self.myajax("/subProduct/getList/" + self.productId + "/" + self.propertyNum, {}, function(data){
						console.log(data)
						if (data && data.code == 1000) {
							var subProductList = data.data;
							for(var i in subProductList){
								subProductCache[ subProductList[i].propertyLabelIds ] = subProductList[i];
							}

							//构建表内容
							$("#subProductBody").empty().append(self.createBody(propertyNum,propertyLabelList[0], propertyLabelList[1], propertyLabelList[2], subProductCache ));
							// self.$notify({title: '提示',message:"缓存刷新成功",type: 'success'});

						}else{
							// self.$notify({title: '提示',message:(data.message==null?"缓存刷新失败":data.message),type: 'error'});
						}
					});

				

				// self.setValue();
			},
			createBody( propertyNum, propertyList1, propertyList2, propertyList3, subProductCache){
				let self = this;
				var tbodyHtml = '';

				if(propertyNum == 1){
					for(var i = 0 ; i < propertyList1.length ; i++ ){
						tbodyHtml += '<tr><td class="el-table_1_column_2 is-leaf"><div class="cell">'+ propertyList1[i].name +'</div></td>';
						tbodyHtml += '<td><input type="input" data-pro1="'+propertyList1[i].id+'" data-pro2="" data-pro3="" data-id="'+self.getIdByIds([propertyList1[i].id],subProductCache)+'" name="ku_cun" value="'+self.getStockByIds([propertyList1[i].id],subProductCache)+'"></td>';
						tbodyHtml += '<td><input type="input" data-pro1="'+propertyList1[i].id+'" data-pro2="" data-pro3="" name="jia_ge" value="'+self.getPriceByIds([propertyList1[i].id],subProductCache)+'"></td></tr>';
					}
				} else if (propertyNum == 2){
					for(var i = 0 ; i < propertyList1.length ; i++ ){
						for( var j =0 ; j < propertyList2.length ; j++ ){ 
							tbodyHtml += '<tr>';
							if( j == 0 ){
								tbodyHtml += '<td rowSpan="'+ propertyList2.length +'">'+ propertyList1[i].name +'</td>';
							}
							var ids = self.getStringByArray([propertyList1[i].id,propertyList2[j].id]);
							tbodyHtml += '<td id="">'+ propertyList2[j].name +'</td>';
							tbodyHtml += '<td><input type="input" data-pro1="'+propertyList1[i].id+'" data-pro2="'+propertyList2[j].id+'" data-pro3="" data-id="'+self.getIdByIds(ids,subProductCache)+'" name="ku_cun" value="'+self.getStockByIds(ids,subProductCache)+'"></td>';
							tbodyHtml += '<td><input type="input" data-pro1="'+propertyList1[i].id+'" data-pro2="'+propertyList2[j].id+'" data-pro3="" name="jia_ge" value="'+self.getPriceByIds(ids,subProductCache)+'"></td></tr>';
						}
					}
				} else if (propertyNum == 3){
					for(var i = 0 ; i < propertyList1.length ; i++ ){
						for( var j = 0 ; j < propertyList2.length ; j++ ){ 
							for( var k = 0 ; k < propertyList3.length ; k++ ){
								tbodyHtml += '<tr>';
								if( j == 0 && k == 0){
									tbodyHtml += '<td rowSpan="'+ propertyList2.length * propertyList3.length +'">'+ propertyList1[i].name +'</td>';
								}
								if( k == 0 ){
									tbodyHtml += '<td rowSpan="'+ propertyList3.length +'">'+ propertyList2[j].name +'</td>';
								}
								var ids = self.getStringByArray([propertyList1[i].id,propertyList2[j].id,propertyList3[k].id]);
								tbodyHtml += '<td>'+ propertyList3[k].name +'</td>';
								tbodyHtml += '<td><input type="input" data-pro1="'+propertyList1[i].id+'" data-pro2="'+propertyList2[j].id+'" data-pro3="'+propertyList3[k].id+'" data-id="'+self.getIdByIds(ids,subProductCache)+'"  name="ku_cun" value="'+self.getStockByIds(ids,subProductCache)+'"></td>';
								tbodyHtml += '<td><input type="input" data-pro1="'+propertyList1[i].id+'" data-pro2="'+propertyList2[j].id+'" data-pro3="'+propertyList3[k].id+'" name="jia_ge" value="'+self.getPriceByIds(ids,subProductCache)+'"></td></tr>';
							}
						}
					}
				} else {
					//属性过多的情况
				}
				return tbodyHtml;
			},
			getStockByIds(ids,subProductCache){		//获取库存
				if (subProductCache[ids] && subProductCache[ids].stock) {
					return subProductCache[ids].stock;
				}
				return 0;
			},
			getPriceByIds(ids,subProductCache){		//获取价格
				if (subProductCache[ids] && subProductCache[ids].price) {
					console.log(subProductCache[ids].price);
					return subProductCache[ids].price;
				}
				return 0;
			},
			getIdByIds(ids,subProductCache){		//获取ID
				if (subProductCache[ids] && subProductCache[ids].id) {
					return subProductCache[ids].id;
				}
				return "";
			}
		}
	}
</script>

<style scoped>
	
</style>
